<template>
	<view>
		<view class="topBox">
		<head-navbar :back="true" :bgColor="'none'">
			<view>
				
			</view>
		</head-navbar>
		</view>
		<view class="bg">
		</view>
		<view class="box" :style="{top:getTabbarContentHeight + 'px'}">
			<view>
			<view class="tip">我的邀请码</view>
			<view class="code">{{inviteCode}}</view>
			<view class="copy" @click="onCopy(inviteCode)">复制</view>
			<view class="tip2">好友可在注册时直接填写邀请码</view>
			<view class="myInvative">发送给好友扫一扫，立即加入</view>
			</view>
			<view>
			<view class="qrcode">
				<image class="image" v-if="img != ''" :src="img" :style="{ width: size+'upx', height: size + 'upx' }" />
			</view>
			<view class="btnList">
				<view class="copy2" @click="operator">保存二维码</view>
				<view class="copy2" style="margin-left: 20rpx;" @click="operator2">分享二维码</view>
			</view>
			</view>
			<view>
			<view class="myInvative">我的邀请码链接</view>
			<view class="link">
				<view class="codeLink">{{myWebUrl +'/share/invite.html?inviteCode=' + inviteCode}}</view>
				<view class="copyLink" @click="onCopy(myWebUrl +'/share/invite.html?inviteCode=' + inviteCode)">复制</view>
			</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {shareServer} from '../../../config/index.js'
	import QR from "../../../components/qrcode/qrcode.js";
	import {
		base64ToPath
	} from '@/components/image-tools/index.js'
	export default{
		data(){
			return{
				getTabbarContentHeight:0,
				img:'',
				myWebUrl:shareServer,
				size:280,
				shareAddress:'',
				inviteCode:null,
			}
		},
		onLoad() {
			// this.getInvative()
			// this.getUserInfo()
			if(uni.getStorageSync("inviteCode")){
				this.inviteCode = uni.getStorageSync("inviteCode")
				this.creatQrcode(this.myWebUrl +'/share/invite.html?inviteCode=' + this.inviteCode)
			}else{
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
		},
		onReady() {
			let that = this
			uni.getSystemInfo({
				success: function(res) { // res - 各种参数
					let info = uni.createSelectorQuery().select(".topBox");
					info.boundingClientRect(function(data) { //data - 各种参数
						that.getTabbarContentHeight =  data.height
					}).exec()
				}
			});
		},
		methods:{
			onCopy(val){
				this.utils.copy(val)
			},
			creatQrcode(val){
				let img = QR.createQrCodeImg(val, {
					size: parseInt(this.size)
				})
				this.img = img;
			},
			operator() {
				var that = this
				uni.showLoading({
					title:'保存中'
				})
				base64ToPath(this.img).then(path => {
								uni.saveImageToPhotosAlbum({
									filePath: path,
									success: () => {
										uni.hideLoading();
										uni.showToast({
											title: "保存成功",
											icon:'none',
										})
									},
									fail: () => {
										uni.hideLoading();
										uni.showToast({
											title: "保存失败",
											icon:'none',
										})
									}
								})
						
					})
					.catch(error => {
						uni.hideLoading();
						uni.showToast({
							title: "保存失败",
							icon:'none',
						})
					})
			
			},
			operator2() {
				var that = this
				uni.showLoading({
					title:'分享中'
				})
				base64ToPath(this.img).then(path => {
								uni.saveImageToPhotosAlbum({
									filePath: path,
									success: () => {
										uni.hideLoading();
										if (plus.os.name == 'Android') {
										    plus.runtime.openURL("weixin://");
										}else if (plus.os.name == 'iOS') {  
											plus.runtime.launchApplication({ action: 'weixin://' }, function(e) {
										    console.log('Open system default browser failed: ' + e.message);  
											});  
										} 
									},
									fail: () => {
										uni.hideLoading();
										uni.showToast({
											title: "分享失败",
											icon:'none',
										})
									}
								})
						
					})
					.catch(error => {
						uni.hideLoading();
						uni.showToast({
							title: "保存失败",
							icon:'none',
						})
					})
			
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bg{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url('../../../static/img/ruler_bg.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		padding: 60rpx;
	}
	.box{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		border-radius: 20rpx;
		background: #fee3da;
		position: fixed;
		left: 40rpx;
		width: calc(100% - 80rpx);
		height: calc(100% - 80rpx - 44px);
		z-index: 99;
		padding: 10rpx;
		text-align: center;
		font-size: 27rpx;
		.tip{
			margin-top: 20rpx;
		}
		.code{
			font-size: 45rpx;
			margin-top: 10rpx;
			color: #FF5C02;
		}
		.copy{
			display: inline-block;
			padding: 10rpx 20rpx;
			border: 1px solid #FF5C02;
			color: #FF5C02;
			font-size: 28rpx;
			border-radius: 10rpx;
			margin-top: 30rpx;
			}
			.btnList{
				// display: flex;
			}
			.copy2{
				display: inline-block;
				padding: 10rpx 20rpx;
				background: #FF5C02;
				color: #FFFFFF;
				font-size: 30rpx;
				border-radius: 10rpx;
				margin-top: 10rpx;
				}
			.tip2{
				margin-top: 30rpx;
				color: #949494;
			}
			.myInvative{
				margin-top: 90rpx;
				font-size: 30rpx;
			}
			.link{
				padding: 0 50rpx;
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				.codeLink{
					word-break: break-all;
					text-align: left;
				}
				.copyLink{
					flex: none;
					margin-left: 30rpx;
					color: #FF5C02;
					font-size: 30rpx;
				}
			}
			.qrcode{
				padding: 20rpx;
				margin: 0 auto;
				margin-top: 20rpx;
			}
	}
</style>
